.header
  position: absolute
  top: 0
  left: 0
  right: 0
  z-index: 1
  font-weight: 400
  font-size: 18px
  color: $white
  &__top
    position: relative
    padding-top: 30px
    padding-bottom: 30px
    justify-content: space-between
    align-items: center
    background-color: $black
  &__burger
    display: none
    width: 36px
    height: 28px
  &__menu-mobile
    display: none
    position: absolute
    z-index: 5
    top: 0
    left: 0
    width: 100vw
    height: 768px
    padding: 37px 50px 51px 50px
    background-color: $menuBurgerBg
    transition: transform .3s ease-in-out
    transform: translateX(-101%)
  &__burger-close
    margin-bottom: 30px
    transition: transform .2s ease-in
  &__burger-close:active
    transform: rotate(90deg)
  &__list-mobile
    margin-bottom: auto
    flex-direction: column
  &__item-mobile
    margin-bottom: 0
  &__link-mobile
    font-weight: 600
    font-size: 24px
    line-height: 64px
  &__link-mobile:not(:last-child)
    margin-bottom: 30px
  &__menu-button
    width: 257px
    height: 60px
    border: 2px solid $colorPurpleDefault
    border-radius: 90px
  &__logo
    width: 173px
    height: 39.9px
    margin-right: 179px
  &__logo img
    height: 100%
  &__nav
    margin-right: auto
    width: 47%
  &__list
    width: 100%
    justify-content: space-between
  &__item
    font-weight: 600
  &__item:not(:last-child)
    margin-right: 20px
  &__link:hover
    outline: none
    color: $menuHover
  &__link:active
    color: $colorDarkPurple
  &__button
    padding-left: 25px
    transition-property: background, color
    transition-timing-function: linear
    transition-duration: .2s
    background-image: url("@/image/header/login.svg")
    background-size: 13px 13px
    background-repeat: no-repeat
    background-position: left 4.5px top 6px
    color: $white
    z-index: 2
  &__button:hover
    color: $menuHover
    background-image: url("@/image/header/login-hover.svg")
    background-size: 17.5px 13px
    background-position: left 0 top 6px
    outline: none
  &__button:active
    color: $colorPurpleDefault
    background-image: url("@/image/header/login-active.svg")
    background-size: 17.5px 13px
    background-position: left 0 top 6px
  &__search-mobile-open
    display: none
    width: 29.45px
    height: 28.82px
  &__search-wrap
    display: none
    position: absolute
    top: 35px
    right: 49px
    align-items: center

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration
  display: none

.header__search-mobile-open.search-active
  opacity: 0

.form__active
  transform: translate(0, -50%)
  opacity: 1
  visibility: visible

.header__search-wrap.search-active
  display: flex

.header__form-btn
  margin-right: 10px
  width: 22.1px
  height: 21.61px

.header__search-btn-size
  width: 29px
  height: 29px

.header__search-input
  margin-right: 24px

.header__bottom
  padding: 18.66px 160px 18.66px 153px
  justify-content: space-between
  background-color: $menuBottom
  &-list
    margin-right: 40px
    max-width: 1055px
    width: 100%
    justify-content: space-between

.header__tab
  position: relative
  &:not(:last-child)
    margin-right: 20px

.header__btn-tab
  padding: 6px 28px 6px 6px
  color: $white
  background-image: url("@/image/header/header-arrow.svg")
  background-position: right 14px top 15px
  background-size: 12px
  background-repeat: no-repeat
  transition-property: background, color
  transition-duration: .2s
  transition-timing-function: ease-in-out
  &:focus-visible:not(:hover):not(.header__btn-tab.active-btn)
    background-color: $colorDarkPurple
    outline: none
  &:hover
    background-image: url("@/image/header/header-arrow-hover.svg")
    color: $colorPurpleDefault
    outline: none
  &.active-btn
    background-image: url("@/image/header/header-arrow-active.svg")
    color: $colorDarkPurple
    outline: none

.header__tab-wrap
  position: absolute
  top: 51px
  left: 0
  width: 300px
  max-height: 300px
  padding: 40px
  background-color: $menuBottom
  opacity: 0
  visibility: hidden
  transform: scale(0.8) translate(-50px, -20px)
  transition-property: opacity, visibility, transform
  transition-duration: .2s
  transition-timing-function: ease-in-out
  z-index: 2

.active-dropdown
  opacity: 1
  visibility: visible
  transform: none

.header__tab-list
  max-height: 220px
  width: 240px
  padding-right: 20px
  overflow: hidden scroll

.simplebar-content:focus-visible,
.simplebar-wrapper:focus-visible,
.simplebar-placeholder:focus-visible,
.simplebar-mask:focus-visible,
.simplebar-offset:focus-visible,
.simplebar-content-wrapper:focus-visible
  outline: none

.header__tab-item
  position: relative
  height: 40px
  padding: 10px 14px
  background-repeat: no-repeat
  background-position: center
  background-size: cover
  color: $white
  transition: box-shadow .3s ease-in-out
  &:not(:last-child)
    margin-bottom: 20px

.header__tab-1-1
  background-image: url("@/image/header/realism/tintoretto.png")

.header__tab-1-2
  background-image: url("@/image/header/realism/fridrih.png")

.header__tab-1-3
  background-image: url("@/image/header/realism/leonardo.png")

.header__tab-1-4
  background-image: url("@/image/header/realism/verroku.png")

.header__tab-2-1
  background-image: url("@/image/header/impressionism/mone.png")

.header__tab-2-2
  background-image: url("@/image/header/impressionism/sisley.png")

.header__tab-2-3
  background-image: url("@/image/header/impressionism/mane.png")

.header__tab-2-4
  background-image: url("@/image/header/impressionism/renuar.png")

.header__tab-3-1
  background-image: url("@/image/header/post-impressionism/van-gog.png")

.header__tab-3-2
  background-image: url("@/image/header/post-impressionism/sezan.png")

.header__tab-3-3
  background-image: url("@/image/header/post-impressionism/gogen.png")

.header__tab-3-4
  background-image: url("@/image/header/post-impressionism/siora.png")

.header__tab-4-1
  background-image: url("@/image/header/avant-garde/kandinskiy.png")

.header__tab-4-2
  background-image: url("@/image/header/avant-garde/marinetti.png")

.header__tab-4-3
  background-image: url("@/image/header/avant-garde/malevich.png")

.header__tab-4-4
  background-image: url("@/image/header/avant-garde/picasso.png")

.header__tab-5-1
  background-image: url("@/image/header/futurism/karra.png")

.header__tab-5-2
  background-image: url("@/image/header/futurism/pratella.png")

.header__tab-5-3
  background-image: url("@/image/header/futurism/severinni.png")

.header__tab-5-4
  background-image: url("@/image/header/futurism/balla.png")

.header__tab-link::after
  content: ''
  position: absolute
  width: 100%
  height: 100%
  top: 0
  left: 0
  transition-property: box-shadow, background
  transition-timing-function: ease-in-out
  transition-duration: .3s

.header__tab-link-text
  position: relative
  z-index: 10

.header__tab-link:focus-visible:not(:active)::after,
.header__tab-link:hover::after
  -webkit-box-shadow: inset 2px 2px $colorPurpleDefault, inset -2px -2px $colorPurpleDefault
  -moz-box-shadow: inset 2px 2px $colorPurpleDefault, inset -2px -2px $colorPurpleDefault
  box-shadow: inset 2px 2px $colorPurpleDefault, inset -2px -2px $colorPurpleDefault

.header__tab-link:active::after
  background-color: $menuActive
  -webkit-box-shadow: inset 2px 2px $colorPurpleDefault, inset -2px -2px $colorPurpleDefault
  -moz-box-shadow: inset 2px 2px $colorPurpleDefault, inset -2px -2px $colorPurpleDefault
  box-shadow: inset 2px 2px $colorPurpleDefault, inset -2px -2px $colorPurpleDefault

.simplebar .simplebar-track.simplebar-vertical
  width: 2px
  background-color: $black

.simplebar .simplebar-scrollbar
  width: 2px
  background-color: $white

.header__form
  align-items: center
  &-btn:focus
    outline: none
  &-btn svg
    width: 100%
    height: 100%

.header__search
  position: relative
  width: 218px
  background: none
  border: none
  caret-color: $white
  color: $white
  border-bottom: 1px solid $search
  &::placeholder
    color: $search

.header__search:focus,
.header__search:hover
  outline: none
  background: none
  border-color: $menuHover

.header__search:checked
  outline: none
  background: none
  border-color: $colorDarkPurple

.header__search:active
  outline: none

@media (max-width: 1420px)
  .header__top
    padding: 29px 50px 29px 50px

  .header__burger
    display: block
    margin-right: auto
    cursor: pointer

  .header__menu-mobile
    display: flex
    flex-direction: column
    justify-content: space-between
    align-items: flex-start
    &.is-active-burger
      transform: none

  .header__logo
    width: 187.6px
    height: 42px
    margin-right: auto

  .header__nav
    display: none

  .header__button-visible
    display: none

  .header__search-mobile-open
    display: block

  .header__bottom
    display: none

@media (max-width: 1008px)
  .header__search-mobile-open
    width: 27px
    height: 27px
    & svg
      width: 100%
      height: 100%

  .header__search-wrap
    width: 100%
    height: 100px
    top: 0
    left: 0
    right: 0
    padding: 34px 50px 37px 54px
    background-color: $black

  .header__form-mobile
    width: 100%

  .header__search-input
    width: 100%

@media (max-width: 687px)
  .header__top
    padding: 12px 15px

  .header__burger svg
    width: 100%
    height: 100%

  .header__burger
    width: 25px
    height: 18px

  .header__menu-mobile
    height: 100vh

  .header__burger-close
    margin-bottom: 16px
    width: 15px
    height: 15px
    & svg
      width: 100%
      height: 100%

  .header__link-mobile
    font-size: 16px
    line-height: 32px

  .header__menu-button
    width: 115px
    height: 40px
    font-size: 16px

  .header__logo
    width: 96.8px
    height: 21.67px

  .header__search-mobile-open
    width: 18px
    height: 18px

  .header__search-wrap
    height: 75px
    padding: 40px 64px 19px 57px
    background-color: $menuBurgerBg

  .header__search-btn-size svg
    width: 100%
    height: 100%

  .header__search-btn-size
    width: 16px
    height: 16px

  .header__form-mobile
    align-items: flex-end

  .header__form-btn
    margin-right: 3px

  .header__search-mobile-close
    position: absolute
    top: 15px
    right: 15px
    width: 15px
    height: 15px

  .header__search-input
    margin-right: 0
